import Vue from 'vue/dist/vue.esm.js'
// import Vue from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            // image: require('../assets/sign.png'),
            map: {},
            AMap: {},
            infoWindow: {},
            lon: "",
            lat: "",
            path: [], // 当前绘制的多边形经纬度数组
            polygonItem: [], // 地图上绘制的所有多边形对象
            polyEditors: [],  // 所有编辑对象数组
            carMarker: null, // 小车的marker
            flag: null,
            loading: false
        }
    },
    mounted() {
    },
    methods: {
        /**
         * 初始化渲染地图
         * 是否执行回调函数
        */
        initMap(flag) {
            this.flag = flag;
            AMapLoader.load({
                key: "006d995d433058322319fa797f2876f5",
                version: "2.0",
                'plugins': ['AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.Marker', 'AMap.AdvancedInfoWindow', 'AMap.PlaceSearch', 'AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar', 'AMap.MoveAnimation', 'AMap.Polyline'],
         
            }).then((AMap) => {
                // 渲染地图
                let map = new AMap.Map(this.$refs.locationMap, {
                    zoom: 11, // 初缩放级别
            center: [112.931248, 28.232434], // 初始中心点
            resizeEnable: true,
            // mapStyle: "amap://styles/darkblue",//背景样式
            pitch: 80,
            rotation: -15,
            animateEnable: false
                });
                this.map = map;
                this.AMap = AMap;
                this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(18, -40) });
                if (flag == 1) {
                    this.initCount();
                } else if (flag == 2) {
                    this.reload()
                } else if (flag == 3) {
                    var equipmentNo = this.$route.query.equipmentNo
                    this.byDataSearch(equipmentNo);
                } else if (flag == 4) {
                    this.editRectangle(this.Elefences)
                }
                this.loading = false
            }).catch(e => {
                // debugger;
                if (e == "禁止多种API加载方式混用") {
                    this.initMap(this.flag)
                } else {
                    console.error(e);
                }
            });
        },
        /**
         * 加载点标记
         * lon 经度
         * lat 纬度
         * content lable显示内容
        */
        initMarker(lon, lat, equipmentNo, content, businessStatusDesc, index) {
            alert()
            console.log("添加点标记",lon, lat, equipmentNo, content, businessStatusDesc, index)
            //添加点标记，并使用自己的icon
            var startMarker = new this.AMap.Marker({
                map: this.map,
                position: new this.AMap.LngLat(lon, lat),
                offset: new this.AMap.Pixel(0, 0),
                icon: new this.AMap.Icon({
                    image: this.image,// 图标的取图地址 
                }),
                extData: { "content": content, "index": index },
            });
            startMarker.setLabel({
                content: "<div class='markerInfo'>" + content + "<span style='color:#ffb600'>（" + businessStatusDesc + "）</span></div>", //设置文本标注内容
                direction: 'top', //设置文本标注方位
                offset: new this.AMap.Pixel(-0, 0),
            });
            if (lon == "") {
                this.lon = lon
                this.lat = lat
                // eslint-disable-next-line no-undef
                zoomAndCenter(lon, lat)
            }
            startMarker.content = equipmentNo;
            startMarker.index = index;
            startMarker.on('click', this.markerClick);
        },
        /**
         * 点击点标记
        */
        markerClick(e) {
            this.byDataSearch1(e.target.content, e.target.index);
        },
        /**
         * 重新设置中心点
         * lon 经度
         * lat 纬度
         * equipmentNo 车牌号码
        */
        zoomAndCenter(lon, lat, equipmentNo) {
            var arrPosition = new Array(lon, lat);
            this.map.setZoomAndCenter(this.map.getZoom() < 10 ? 16 : this.map.getZoom(), arrPosition);

            //构建信息窗体中显示的内容
            if (equipmentNo) {
                var router = this.$router;
                var MyComponent = Vue.extend({
                    template: this.initContent(),
                    methods: {
                        edit() { 
                            router.push({path: "/HistoryTrack", query: { "equipmentNo": equipmentNo,"arrPosition": arrPosition  } })
                        } 
                    }
                });
                var component = new MyComponent().$mount();
                this.infoWindow.setContent(component.$el);
                this.infoWindow.open(this.map, arrPosition);
            }
        },
        /**
         * 编辑围栏
        */
        editRectangle(paths) {
            this.deleRectangle();
            const path = paths;
            const AMap = this.AMap;
            var polygon = new this.AMap.Polygon({
                path: path,
                strokeColor: "#FF33FF",
                strokeWeight: 3,
                strokeOpacity: 0.5,
                fillOpacity: 0.3,
                fillColor: '#1791fc',
                zIndex: 50,
                bubble: true,
            });

            this.map.add(polygon);
            this.polygonItem.push(polygon);
            // 缩放地图到合适的视野级别
            this.map.setFitView([polygon]);

            this.polyEditor = new AMap.PolyEditor(this.map, polygon);
            this.polyEditor.open();
            this.polyEditors.push(this.polyEditor);

            this.polyEditor.on('addnode', function (event) {
                console.info('触发事件：addnode', event)
                console.info('修改后的经纬度：', polygon.getPath())
            });

            this.polyEditor.on('adjust', function (event) {
                console.info('触发事件：adjust', event)
                console.info('修改后的经纬度：', polygon.getPath())
            });

            this.polyEditor.on('removenode', function (event) {
                console.info('触发事件：removenode', event)
                console.info('修改后的经纬度：', polygon.getPath())
            });

            this.polyEditor.on('end', function (event) {
                console.info('触发事件： end', event)
                console.info('修改后的经纬度：', polygon.getPath())
                // event.target 即为编辑后的多边形对象
            });
        },
       
        /**
         * 批量删除多边形
        */
        deleRectangle() {
            // 取消编辑状态
            this.polyEditors.forEach(v => {
                v.close();
            });
            this.polygonItem = []
            this.map.clearMap(); // 删除地图所有覆盖物
        },
        /**
         * 绘制轨迹
         * lon 经度
         * lat 纬度
         * arr 轨迹经纬度 如[[116.478935,39.997761]]
        */
        initPolyline(lon, lat, lineData) {
            // 创建小车marker
            this.carMarker = new this.AMap.Marker({
                map: this.map,
                position: [lon, lat],
                icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
                offset: new this.AMap.Pixel(-13, -26),
            });

            // 绘制轨迹
            new this.AMap.Polyline({
                map: this.map,
                path: lineData,
                showDir: true,
                strokeColor: '#28F', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 6, //线宽
                // strokeStyle: 'solid'  // 线样式
            });

            // 通过的轨迹
            let passedPolyline = new this.AMap.Polyline({
                map: this.map,
                showDir: true,
                strokeColor: '#4B5', // 线颜色
                strokeOpacity: 1, // 线透明度
                strokeWeight: 6, // 线宽
            });

            // 小车移动回调
            this.carMarker.on('moving', function (e) {
                passedPolyline.setPath(e.passedPath);
            });

            // 地图自适应
            this.map.setFitView();
        },
        /* 开始轨迹回放动画 */
        startTrackAnim(lineData) {
            this.carMarker.stopMove();
            this.carMarker.moveAlong(lineData, {
                duration: 200,
                autoRotation: true
            });
        },
        /* 暂停轨迹回放动画 */
        pauseTrackAnim() {
            this.carMarker.pauseMove();
        },
        /* 继续开始轨迹回放动画 */
        resumeTrackAnim() {
            this.carMarker.resumeMove();
        }
    }
}
